<template>
    <div class="page">
      <div>
        <div class="item title-bar" v-if="dataInfo">
          <div class="block-title">{{dataInfo.name}}</div>
          <span
            class="block-btn--add"
            :class="dataInfo.choose && 'active'"
            @click="addMajor();dataInfo.choose=!dataInfo.choose">
              {{dataInfo.choose?'已添加备选库':'添加至备选库'}}
          </span>

        </div>
        <div class="p20-0">
          <tabs :data="list" :value="curIndex" @event="tabSwitch"></tabs>
        </div>
      </div>
      <div class="content scroll-wrap">
        <div class="tab-content">
          <!-- 院校列表 -->
          <div v-show="curIndex===0&&!fromSchool">
            <majorDetailSchool @event="!dataInfo.choose && (dataInfo.choose = true)" ref="refMajorDetailSchool"></majorDetailSchool>
          </div>
          </div>
          <!-- 概况 -->
          <div v-show="curIndex===1" class="p-0">
            <div class="list list-wrap" v-show="data.description||data.schoolingTime||data.degree">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3>专业概况</h3>
              </div>
              <div class="item item-text-wrap">
                <div class="word" v-if="data.description">
                  <span class="bold" style="display:inline;">培养目标：</span>
                  <span class="text">{{data.description}}</span>
                </div>
                <div class="word" v-if="data.schoolingTime">
                  <span class="bold">学制：</span>
                  <span class="text">{{data.schoolingTime}}年</span>
                </div>
                <div class="word" v-if="data.degree">
                  <span class="bold">学位授予：</span>
                  <span class="text">{{data.degree}}</span>
                </div>
              </div>
            </div>
            <div class="list list-wrap" v-show="data.knowledge">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3 v-if="data.grade">{{data.grade.name==='专科'?'主要职业能力':'获得知识与能力'}}</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.knowledge}}
              </div>
            </div>
            <div class="list list-wrap" v-show="data.courses">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3 v-if="data.grade">{{data.grade.name==='专科'?'核心课程':'主要课程'}}</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.courses}}
              </div>
            </div>
            <div class="list list-wrap" v-show="data.practical">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3 v-if="data.grade">{{data.grade.name==='专科'?'实习实训':'实践教学'}}</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.practical}}
              </div>
            </div>
            <div class="list list-wrap" v-show="data.grade&&data.grade.name==='专科'&&data.jobQualificationCertificate">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3>职业资格证书示例</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.jobQualificationCertificate}}
              </div>
            </div>
            <div class="list list-wrap" v-show="data.grade&&data.grade.name==='专科'&&data.inheritSecondaryVocational">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3>衔接中职专业示例</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.inheritSecondaryVocational}}
              </div>
            </div>
            <div class="list list-wrap" v-show="data.grade&&data.grade.name==='专科'&&data.inheritUndergraduate">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3>接续本科专业示例</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.inheritUndergraduate}}
              </div>
            </div>
            <div class="list list-wrap" v-show="data.employment">
              <div class="item p-0">
                <div class="vertical-bar"></div>
                <h3 v-if="data.grade">{{data.grade.name==='专科'?'就业面向':'就业情况'}}</h3>
              </div>
              <div class="item item-text-wrap text">
                {{data.employment}}
              </div>
            </div>
          </div>
          <!-- 评价 -->
          <div class="list relate" v-show="curIndex===2">
            <div class="list list-wrap">
              <div class="item item-text-wrap" v-for="(item,i) in data.evaluate" :key="i">
                <p class="bold">{{item.title}}</p>
                <p class="question">{{item.content}}</p>
              </div>
            </div>
          </div>
          <!-- 分数线 -->
          <div class="list relate" v-if="curIndex===commentIndex">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>专业分数线</h3>
            </div>
            <com-select :data="selectList" :choiceIndex="selectScoreIndex" @choice="selectSorceSwitch"></com-select>
            <table cellspacing="0" v-if="scoreLines.length>0">
              <colgroup>
                <col width="80">
                <col width="160">
                <col >
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="120">
                <col width="120">
              </colgroup>
              <thead>
                <tr>
                  <td v-for="(item,index) in tableTh" :key="index">{{item}}</td>
                </tr>
              </thead>
              <tbody v-for="(obj,index) in scoreLines" :key="index">
                <tr v-for="(item,i) in obj" :key="i">
                  <td :rowspan="obj.length" :class="i>0?'none':''">{{item.year}}</td>
                  <td>{{item.batch}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.maxScore}}</td>
                  <td>{{item.minScore}}</td>
                  <td>{{item.averageScore}}</td>
                  <td>{{item.minRank}}</td>
                  <td>{{item.enrollCount}}</td>
                </tr>
              </tbody>
            </table>
            <no-content :text="text"></no-content>
          </div>
        </div>
    </div>
</template>

<script>
import { api, formatDate } from '@/utils'
import comSelect from '~/components/comSelect'
import majorDetailSchool from './major-detail--school'
export default {
  layout: 'zhiyuan',
  components: {
    comSelect,
    majorDetailSchool
  },
  data () {
    return {
      id: '',
      dataInfo: '',
      isPraise: false,
      fromSchool: '',
      commentIndex: '',
      page: 1,
      list: [
        {
          name: '开设院校',
          index: 0
        }, {
          name: '概况',
          index: 1
        }, {
          name: '学生评价',
          index: 2
        }
      ],
      curIndex: 0,
      data: {},
      pickerList: [],
      pickerIndex: [0, 0, 0, 0],
      selectList: {},
      selectIndex: [0, 0, 0],
      selectScoreIndex: [0, 0],
      params: {},
      listData: [],
      tableTh: ['年份', '批次', '专业', '最高分', '最低分', '平均分', '最低位次', '录取数'],
      scoreLines: [],
      totalElements: 0,
      totalCount: 0,
      province: '',
      text: '正在加载数据...'
    }
  },
  methods: {
    init (data) {
      this.id = data.id
      this.dataInfo = data
      this.curIndex = 0
      this.getShuju()
      this.$refs.refMajorDetailSchool.init(this.id)
    },
    addMajor () {
      this.$axios.post(api.setFirstMajor, { major: { id: this.id } }).then(data => {
        this.$refs.refMajorDetailSchool.init(this.id)
        console.log('添加专业成功')
      }).catch(err => {
        console.log(err)
      })
    },
    follow () {
      this.$axios.get(api.zhiyuanSetFavorite, { params: { type: 2, id: this.params.majorId } }).then(data => {
        this.isPraise = !this.isPraise
      })
    },
    tabSwitch (i) {
      console.log('点击切换', i)
      this.curIndex = i
      if (this.curIndex === 1) {
        this.getShuju()
      }
      // if (this.curIndex === 1 && this.commentIndex === '') {
      //   // this.$refs.schoolList.init()
      //   this.$axios.get(api.zhiyuanQueryCollegeCondition).then(data => {
      //     this.pickerList = []
      //     for (let x in data) {
      //       data[x].unshift({
      //         id: null,
      //         name: '不限'
      //       })
      //       let obj = {}
      //       data[x].forEach((item, index) => {
      //         if (item.id === undefined || item.id === null) {
      //           item.id = ''
      //         }
      //         switch (x) {
      //           case 'provinces':
      //             item.type = 'provinceId'
      //             obj.title = '学校地区'
      //             obj.data = data[x]
      //             break
      //           case 'collegeLevels':
      //             item.type = 'collegeLevelId'
      //             obj.title = '学校类型'
      //             obj.data = data[x]
      //             break
      //           case 'collegeTypes':
      //             item.type = 'collegeTypeId'
      //             obj.title = '学校性质'
      //             obj.data = data[x]
      //             break
      //           case 'grades':
      //             item.type = 'gradeId'
      //             obj.title = '学校要求'
      //             console.log(data[x])
      //             obj.data = data[x]
      //             break
      //         }
      //         if (index === 0) {
      //           this.params[item.type] = item.id
      //         }
      //       })
      //       this.pickerList.push(obj)
      //     }
      //   })
      //   this.getData(this.params)
      // }
    },
    pickerSwitch (index, i, item) {
      this.pickerIndex.splice(index, 1, i)
      if (index === 0) {
        this.province = `${item.name}省`
      }
      this.params[item.type] = item.id
      this.params.page = 0
      this.getData(this.params)
    },
    // 院校下拉框
    selectSwitch (obj, index) {
      switch (index) {
        case 0:
          this.params.stuProvince = obj.id
          break
        case 1:
          this.params.scienceArtId = obj.id
          break
        case 2:
          this.params.year = obj.id
          break
      }
      this.page = 1
      this.params.page = 0
      this.getData(this.params)
    },
    // 分数线下拉框
    selectSorceSwitch (obj, index) {
      switch (index) {
        case 0:
          this.params.provinceId = obj.id
          break
        case 1:
          this.params.scienceArtId = obj.id
          break
      }
      this.getSorce(this.params)
    },
    // 获取院校列表
    getData (params) {
      this.$axios.get(api.zhiyuanQueryCollegeMajorScoreLine, { params: params }).then(data => {
        if (data.content.length > 0) {
          this.listData = data.content
          this.totalElements = data.totalElements
          this.text = ''
          // if (!params.collegeLevelId && !params.collegeTypeId && !params.provinceId && !params.subjectId) {
          this.totalCount = data.totalElements
          // }
        } else {
          this.listData = []
          this.totalElements = 0
          this.totalCount = 0
          this.text = '暂无数据'
        }
      })
      console.log(this.totalCount)
    },
    // 获取分数线数据
    getSorce (params) {
      this.$axios.get(api.zhiyuanQueryFilterCollegeMajorScoreLine, { params: params }).then(data => {
        if (data.length > 0) {
          this.text = ''
          this.scoreLines = data
        } else {
          this.scoreLines = []
          this.text = '暂无数据'
        }
      })
    },
    // 分页
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getData(this.params)
    },
    getShuju () {
      // this.curIndex = 1
      // let majorId = this.$route.query.id
      // this.fromSchool = this.$route.query.fromSchool
      // let collegeId = this.$route.query.collegeId
      let majorId = this.id
      console.log('majorId-----', majorId)
      this.fromSchool = ''
      let collegeId = ''
      let userInfo = this.$store.state.userInfo
      console.log(userInfo)
      let provinces = userInfo.province.id
      // let year = userInfo.startYear
      // 如果是从院校过来的就显示分数线
      if (this.fromSchool) {
        this.params = {
          majorId: majorId,
          scienceArtId: 0,
          provinceId: provinces,
          collegeId: collegeId
        }
        this.commentIndex = 1
        this.list = [
          {
            name: '概况',
            index: 0
          }, {
            name: '分数线',
            index: 1
          }
        ]
        this.getSorce(this.params)
      } else {
        this.params = {
          majorId: majorId,
          year: 2018,
          stuProvince: provinces,
          scienceArtId: 0,
          page: 0,
          size: 15
        }
      }
      // 获取下拉框筛选值
      this.$axios.get(api.zhiyuanQueryScoreCondition).then(data => {
        if (!this.fromSchool) {
          let year = []
          for (let i = 0; i < 1; i++) {
            year.push({ id: `${formatDate(new Date(), 'yyyy') - i}`, name: formatDate(new Date(), 'yyyy') - i })
          }
          data['year'] = year
        }
        this.selectList = data
        // 根据用户信息更改下拉框默认索引值
        let userProvinces = this.lodash.findIndex(this.selectList.provinces, (item) => {
          return item.id === provinces
        })
        // let userYear = this.lodash.findIndex(this.selectList.year, (item) => {
        //   return item.id === year
        // })
        if (this.fromSchool) {
          this.selectScoreIndex.splice(0, 1, userProvinces)
        } else {
          this.selectIndex.splice(0, 1, userProvinces)
          // this.selectIndex.splice(2, 1, userYear)
        }
      })
      // 获取专业详情
      this.$axios.get(api.zhiyuanQueryMajor, { params: { id: this.params.majorId } }).then(data => {
        if (data) {
          if (data.major.evaluate) {
            data.major.evaluate = JSON.parse(data.major.evaluate)
          } else if (!this.fromSchool) {
            this.list = [
              {
                name: '开设院校',
                index: 0
              }, {
                name: '概况',
                index: 1
              }
            ]
          }
          this.data = data.major
          this.isPraise = data.isPraise
        } else {
          this.data = {}
        }
      })
    }
  }
  // watch: {
  //   id: function (val, oldVal) {
  //     console.log('new: %s, old: %s', val, oldVal)
  //     if (val !== oldVal) {
  //       this.getShuju()
  //     }
  //   }
  // }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .select {
    > div {
      margin-right: 20px;
    }
  }
  .title-bar {
    justify-content: space-between;
    border-bottom: 1px solid $stable-ec;
    padding: 10px 25px 10px 0;
    align-items: center;
    // .bar {
    //   margin-right: 10px;
    //   ~ div {
    //     padding: 0;
    //   }
    // }
    .tab_bubble {
      margin-bottom: 0 !important;
    }
    > div:last-child {
      justify-content: space-between;
      flex: 1;
    }
    .sub {
      margin-right: 5px;
    }
    .chooce {
      margin-left: 10px;
    }
  }
  /deep/ .select {
    display: flex;
    margin: 10px 0;
    align-items: center;
  }
  .content {
    position: relative;
    flex: 1;
    // overflow-y: auto;
    padding:0px !important;
    .totalCount {
      margin-top: 20px;
    }
    .school-list {
      margin-top: 25px;
      .item {
        &-stripe {
          margin: 0 -20px;
        }
        h3 {
          margin-bottom: 8px;
        }
        &-content {
          > span {
            margin-right: 8px;
          }
          .city {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
.p-0 {
  .list {
    margin-bottom: 15px;
    .item {
      padding: 0;
    }
  }
}
.relate {
  > .item {
    margin-bottom: 10px;
  }
}
.question {
  margin-top: 10px;
}
.relate {
  .item {
    padding: 12px 0;
  }
}
</style>
